import React, { Component } from 'react';
import {bindActionCreators} from 'redux'
import { connect} from 'react-redux'
import * as actions from '../actions/actions.js'

import ListView from '../components/ListView';
import ItemCard from '../components/ItemCard';
import BottomBar from '../components/BottomBar';
import Banner from '../components/Banner';
import SlideNavigation from '../components/SlideNavigation';
import SpanWithLeftIcon from '../components/SpanWithLeftIcon'
import cookie from 'react-cookie'
//require('react/addons')


class IndexContainer extends Component {


    constructor(props) {
        window.React = React;

        super(props);
        this._onScrollHandle = this.onScrollHandle.bind(this);
    }
    //
    //componentWillReceiveProps(nextProps,nextState){
    //    //console.log("nextProps",nextProps.location.query,"session",sessionStorage.getItem("payFront"));
    //}
    componentWillMount() {
        //前台支付回调
        if(this.props.location.query.returnStatus==1){
            //如果sessionStorage有 不调用
            if(sessionStorage.getItem("payFront")!=null&&sessionStorage.getItem("payFront")==this.props.location.query.orderno){
            }else{
                sessionStorage.setItem("payFront",this.props.location.query.orderno);
                this.props.frontPayBack(this.props.location.query.orderno,1);
            }
        }
        //返回URL
        window.sessionStorage.setItem("retUrl","/index");
        //首页openid
        if(this.props.location.query.openId){
            window.sessionStorage.setItem("openid",this.props.location.query.openId);
        }

        var department_id = this.props.location.query.department_id;//url上的ID
        if (!department_id)
            department_id = 0;


        //如果sessionStorage.department_id 为null则是第一次打开
        if(document.referrer.indexOf("weixin.96225")>=1||(location.hash!="#forceupdate"&&window.sessionStorage.getItem("department_id")==null)){
            window.sessionStorage.setItem("department_id",department_id);
        }
        if(location.hash=="#forceupdate"&&this.props.location.query.department_id){
            department_id=this.props.location.query.department_id;
        }else{
            department_id=window.sessionStorage.getItem("department_id");
        }
        //点击其他页面 再回来会不重新加载数据
        //console.log(this.props.valueCardList.get('data'));
        if (this.props.valueCardList.get('data').size==0) {
            this.props.vauleCardListFetch(this.props.currentPage, department_id);
        }
        this.props.bannerListFetch(department_id);

        window.addEventListener("scroll", this._onScrollHandle);

        //app
        if(this.props.location.query.noWx){//http://caibaojian.com/browser-ios-or-android.html
            //http://www.cnblogs.com/xiamer/p/5882651.html
                window.sessionStorage.setItem("noWx",1);
        }else{
                window.sessionStorage.setItem("noWx",0);
        }
    }


    componentWillUnmount(){
        window.removeEventListener("scroll", this._onScrollHandle);
    }

    onScrollHandle(event){
        //weixin scoll的延迟问题 直接使用其他元素的offset top  //bottombar 高度50
        //$(".bottomBar").offset().top>$(window).height()-50+125
        if($(".bottomBar").offset().top>$(window).height()+75){
            //console.log(this.getScrollTop());
            //console.log($("#SlideNavi").offset().top)
            //固定到顶部后 top 变为0
            //console.log("大");
            if(!$("#SlideNavi").hasClass("header_fixed")){
                $(".cardContainer").css("padding-top","120px");
                $("#SlideNavi").addClass("header_fixed");
            }
        }else{
            if($("#SlideNavi").hasClass("header_fixed")){
                $(".cardContainer").css("padding-top","0px");
                $("#SlideNavi").removeClass("header_fixed");
            }
        }

        //console.log(this.getScrollTop(),this.getWindowHeight(),this.getScrollHeight());
        if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()){
            if (this.props.needFetch) {
                let page = this.props.currentPage + 1;
                var department_id=window.sessionStorage.getItem("department_id");
                if(location.hash=="#forceupdate"&&this.props.location.query.department_id){
                    department_id=this.props.location.query.department_id;
                }
                this.props.vauleCardListFetch(page,department_id);
            }
        }



    }



     getScrollTop(){
        //var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        //if(document.body){
        //    bodyScrollTop = document.body.scrollTop;
        //}
        //if(document.documentElement){
        //    documentScrollTop = document.documentElement.scrollTop;
        //}
        //scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        // console.log($();

         //解决快速滑动，页面不停止，scrolltop的值就不会更新
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop;
         return scrollTop;
    }

//文档的总高度

     getScrollHeight(){
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if(document.body){
            bodyScrollHeight = document.body.scrollHeight;
        }
        if(document.documentElement){
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }

//浏览器视口的高度

     getWindowHeight(){
        var windowHeight = 0;
        if(document.compatMode == "CSS1Compat"){
            windowHeight = document.documentElement.clientHeight;
        }else{
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

    getAnnonce(){
        if(annonce){
            return (<SpanWithLeftIcon text={annonce} iconSrc="/public/img/hot_icon.png"/>)
        }
    }


    render() {

        return (
            <div>
                <Banner data={this.props.bannerlist.data} />
                {<SlideNavigation cates={this.props.bannerlist.cates} />}
                <div className="cardContainer" style={{ margin:"10px 20px 80px 20px",paddingBottom:"40px"}}>
                    {this.getAnnonce()}
                    <ListView dataList={this.props.valueCardList} itemType={-1}/>
                </div>
                <BottomBar/>

            </div>

        )
    }
}



function mapStateToProps(state) {

    var isNeedFetch = state.get('valueCardList').toJS().isNeedFetch;
    if (state.get('valueCardList').get('data').size<10){
        isNeedFetch =false
    }
    return {
        bannerlist : state.get('bannerlist').toJS(),
        //valueCardList : state.get('valueCardList').toJS().data,
        valueCardList:state.get('valueCardList'),
        currentPage:state.get('valueCardList').toJS().page,
        needFetch:isNeedFetch
    }


}
function mapDispatchToProps(dispatch) {

    return bindActionCreators(actions, dispatch);
}
IndexContainer.defaultProps = {
    needFetch:true
}


IndexContainer.propTypes = {}
module.exports=connect(mapStateToProps, mapDispatchToProps)(IndexContainer);


